<!--
* @author wn
* @date 2022/10/20 11:07:24
* @description: 主页 echarts 组件 -- 折线图 柱状图 饼状图
!-->
<template>
	<!-- 折线图 -->
	<el-card :body-style="{ height: '300px', paddingTop: '20px' }">
		<div ref="line" style="height: 300px"></div>
	</el-card>
	<div class="echarts-two">
		<!-- 柱状图 -->
		<el-card :body-style="{ height: '276px', padding: '0' }">
			<div ref="bar" style="height: 276px"></div>
		</el-card>
		<!-- 饼状图 -->
		<el-card :body-style="{ height: '276px', padding: '0' }">
			<div ref="pie" style="height: 276px"></div>
		</el-card>
	</div>
</template>
<script setup>
import {
	echartsLine,
	echartsBar,
	echartsPie,
	getEchartsData,
} from '@/network/home'
import { nextTick, reactive, ref } from 'vue'
import * as echarts from 'echarts'

// echarts 折线图 渲染部分  折线--柱状
const xOptions = reactive(echartsLine)
// 柱状图 配置
const xOptionsBar = reactive(echartsBar)
// 饼状图 配置
const pieOptions = reactive(echartsPie)
// 组件实例 传入  echarts init
const line = ref('')
const bar = ref('')
const pie = ref('')
// Mock 获取数据
getEchartsData().then(({ result }) => {
	/**
	 *  折线图
	 *  1 x轴数据     是 xAxis-data     date 7个
	 *  2 坐标点 数据 是  series     { data[苹果:6个价格数据 ]}
	 */
	xOptions.xAxis.data = result.orderData.date
	// 随便 一个 data数据 的所有 key
	const keys = Object.keys(result.orderData.data[0])
	// 生成 series--data:[摘取 苹果 6个价格数据 ]
	xOptions.series = []
	keys.forEach(key => {
		xOptions.series.push({
			name: key,
			type: 'line',
			data: result.orderData.data.map(obj => obj[key]),
		})
	})
	// 柱状图
	xOptionsBar.xAxis.data = result.userData.map(v => v.date)
	xOptionsBar.series = [
		{
			name: '新增用户',
			type: 'bar',
			data: result.userData.map(v => v.new),
		},
		{
			name: '活跃用户',
			type: 'bar',
			data: result.userData.map(v => v.active),
		},
	]
	// 饼状图
	pieOptions.series = [{ type: 'pie', data: result.videoData }]
	// 渲染  echarts
	// echarts 容器 实例  必须有 宽高
	nextTick(() => {
		echarts.init(line.value).setOption(xOptions)
		echarts.init(bar.value).setOption(xOptionsBar)
		echarts.init(pie.value).setOption(pieOptions)
	})
})
</script>
<style scoped lang="scss">
.echarts-two {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.el-card {
		flex: 0 49%;
	}
}
</style>
